<template>
  <div class="information">
    <div>
      <ul class="information-wrapper">
        <li class="information-content">
          <div class="name">姓名</div>
          <el-input v-model="stuName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">学号</div>
          <el-input v-model="stuNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name" style="margin-right:13px;width:69px ">性别</div>
          <el-radio v-model="radio" label="1">男</el-radio>
          <el-radio v-model="radio" label="2">女</el-radio>
        </li>
        <li class="information-content">
          <div class="name">学院</div>
          <el-input v-model="stuCollege"></el-input>
        </li>
        <li class="information-content">
          <div class="name">专业</div>
          <el-input v-model="stuMajor"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班级</div>
          <el-input v-model="stuClass" placeholder="例：19级计科2班"></el-input>
        </li>
        <li class="information-content">
          <div class="name">年级</div>
          <el-input v-model="stuGrade" placeholder="例：2019"></el-input>
        </li>
        <li class="information-content">
          <div class="name">目的地</div>
          <el-input v-model="destination"></el-input>
        </li>
        <li class="information-content">
          <div class="name"  style="width: 81px">请假类型</div>
          <el-select class="type" v-model="value" placeholder="请选择" style="margin-left: 15px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </li>
        <li class="information-content">
          <div class="name" style="margin-left:-4px" >请假原因</div>
          <el-input v-model="leaveSeason"></el-input>
        </li>
        <li class="information-content">
          <div class="name" style="width:70px">开始时间</div>
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '07:00',
              step: '00:15',
              end: '23:59',
            }"
          >
          </el-time-select>
        </li>
        <li class="information-content">
          <div class="name" style="width:70px">结束时间</div>
          <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '23:59',
              minTime: startTime,
            }"
          >
          </el-time-select>
        </li>
        <li class="information-content">
          <div class="name">身份证号</div>
          <el-input v-model="idCard"></el-input>
        </li>
        <li class="information-content">
          <div class="name">本人联系电话</div>
          <el-input v-model="myNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">家长姓名</div>
          <el-input v-model="parentName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">家长联系电话</div>
          <el-input v-model="parentNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班主任姓名</div>
          <el-input v-model="classTeacherName"></el-input>
        </li>
        <li class="information-content">
          <div class="name">班主任联系电话</div>
          <el-input v-model="classTeacherNo"></el-input>
        </li>
        <li class="information-content">
          <div class="name">学院领导姓名</div>
          <el-input v-model="leaderName"></el-input>
        </li>
        <li>
          <div class="draw">
            <div class="write">
              <div class="img-write" >手写签名</div>
              <vue-esign
                style="border: 1px black solid; margin: 0 0 10px 10px"
                ref="esign"
                :width="150"
                :height="100"
                :isCrop="isCrop"
                :lineWidth="lineWidth"
                :lineColor="lineColor"
                :bgColor.sync="bgColor"
              />
              <div class="write-bu">
                  <el-button type="primary" size='mini' @click="handleReset">清空画板</el-button>
                  <el-button type="primary" size='mini' @click="handleGenerate">生成图片</el-button>
              </div>
            </div>
            <div class="look">
                <div class="img-look" >预览图片</div>
                <img class="sign-img"   style="height: 100px;width: 150px;border: 1px solid #999;margin-bottom:15px" :src="resultImg" alt=""  @click="previewImg">
            </div>
          </div>
        </li>
      </ul>
      <div class="generate">
        <el-button type="success" style="width: 300px" @click="price"
          >一键生成</el-button
        >
        <!-- <el-button type="success" style="width: 300px" :class="{on:'/main'===$route.path}" @click="goTo('/main')">完成</el-button> -->
      </div>
    </div>
    <!-- <Main/> -->
  </div>
</template>

<script>
// import Public from '../../public'
// import Main from '../Main/index.vue'
export default {
  // components: {
  //     Main
  // },
  data() {
    return {
      lineWidth: 1,
      lineColor: "#000000",
      bgColor: "rgba(255,255,255,0)", //白色透明背景
      resultImg: "",
      isCrop: false,
      nameState: true,
      stuName: "",
      stuNo: "",
      radio: "1",
      stuCollege: "",
      stuMajor: "",
      stuClass: "",
      stuGrade: "",
      destination: "",
      startTime: "",
      endTime: "",
      idCard: "",
      myNo: "",
      parentNo: "",
      classTeacherName: "",
      leaveSeason: "",
      classTeacherNo: "",
      leaderName: "",
      parentName: "",
      options: [
        {
          value: "事假",
          label: "事假",
        },
        {
          value: "病假",
          label: "病假",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
      value: "",
      // label:''
    };
  },
  methods: {
    previewImg () {
      this.$hevueImgPreview(this.resultImg)
    },
    formatDate() {
      let date = new Date();
      let YY = date.getFullYear() + '-';
      let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
      // let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      // let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      // let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
      // return YY + MM + DD +" "+hh + mm + ss;
      return YY + MM + DD +" ";
    },
    price() {
      this.$router.push({
        name: "Main",
        params: {
          stuName: this.stuName,
          stuNo: this.stuNo,
          idCard: this.idCard,
          myNo: this.myNo,
          parentNo: this.parentNo,
          classTeacherName: this.classTeacherName,
          leaveSeason: this.leaveSeason,
          classTeacherNo: this.classTeacherNo,
          leaderName: this.leaderName,
          value: this.value,
          // label:this.label,
          endTime: this.formatDate()+this.endTime,
          startTime: this.formatDate()+this.startTime,
          stuGrade: this.stuGrade,
          stuClass: this.stuClass,
          stuMajor: this.stuMajor,
          stuCollege: this.stuCollege,
          radio: this.radio,
          parentName: this.parentName,
          resultImg: this.resultImg,
          destination:this.destination
        },
      });
      var localdata={
          stuName: this.stuName,
          stuNo: this.stuNo,
          idCard: this.idCard,
          myNo: this.myNo,
          parentNo: this.parentNo,
          classTeacherName: this.classTeacherName,
          leaveSeason: this.leaveSeason,
          classTeacherNo: this.classTeacherNo,
          leaderName: this.leaderName,
          value: this.value,
          // label:this.label,
          endTime: this.formatDate()+this.endTime,
          startTime: this.formatDate()+this.startTime,
          stuGrade: this.stuGrade,
          stuClass: this.stuClass,
          stuMajor: this.stuMajor,
          stuCollege: this.stuCollege,
          radio: this.radio,
          parentName: this.parentName,
          resultImg: this.resultImg,
          destination:this.destination
      }
    // localStorage.getItem(text);
      // var storage=window.localStorage;
       var setData=JSON.stringify(localdata); 
      //  storage.setItem("data",setData);
      console.log("setdata");
      console.log(setData);
      localStorage.setItem("data",setData);
      var data = JSON.parse(localStorage.getItem('data'))
      console.log("data")
      console.log(data)
    },
    handleReset() {
      this.$refs["esign"].reset(); //清空画布
    },
    handleGenerate() {
      this.$refs["esign"].generate().then((res) => {
        this.resultImg = res; // 得到了签字生成的base64图片
        console.log(this.resultImg);
        // document.querySelector(".sign").remove();
        // document.querySelector(".sign-img").style.visibility = "visible";
      });
    },
    goTo(path) {
      this.$router.push(path);
    },
  },
  mounted() {
  
      //  var jsonString=localStorage.getItem("data");
      //  console.log("-----");
      //  console.log(jsonString);
        // console.log("data");
        // console.log(typeof jsonString); 
        // this.jsonObj=JSON.parse(jsonString);
        // this.info=JSON.parse(jsonString);
    
  }
};
</script>

<style scoped>
.information {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.qianming {
  margin-left: 50px;
}
.type {
  margin-left: 10px;
}
.information-wrapper {
  display: flex;
  flex-direction: column;
}
.information-content {
  display: flex;
  flex-direction: row;
  margin: 20px 20px 0 0;
}
.name {
  width: 90px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0;
}
.el-input {
  margin-left: 20px;
}
.el-radio {
  margin: 12px 0 0 10px;
}
.generate {
  margin-top: 20px;
  text-align: center;
}
.draw {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.write {
    /* margin-left: 20px; */
    display: flex;
    flex-direction: column;
}
.look {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}
.img-write {
    margin-top: 20px;
    text-align: center;
}
.img-look,.write-bu {
    text-align: center;
}



</style>